<template>
  <div class="app-container">
    <el-card style="padding-bottom: 100px">
      <TitleLine title="参数信息" />
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="积分值" prop="integral">
          <el-input
            v-model.number="formData.integral"
            :maxlength="7"
            placeholder="请输入积分值(10-1000000)"
            clearable
            :style="{ width: '30%' }"
          ></el-input>
          <span class="ft-14 ml-5" style="color: #87877d">购买后可直接获得的积分值</span>
        </el-form-item>
        <el-form-item label="赠送积分" prop="giftIntegral">
          <el-input
            v-model.number="formData.giftIntegral"
            :maxlength="6"
            placeholder="请输入赠送积分(0-100000)"
            clearable
            :style="{ width: '30%' }"
          ></el-input>
          <span class="ft-14 ml-5" style="color: #87877d">购买后赠送的积分值</span>
        </el-form-item>
        <el-form-item label="需支付金额" prop="amount">
          <el-input
            v-model.number="formData.amount"
            placeholder="请输入需支付金额(1-50000)"
            :maxlength="5"
            clearable
            :style="{ width: '30%' }"
          ></el-input>
          <span class="ft-14 ml-5" style="color: #87877d">购买该积分套餐需要支付的金额</span>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            v-model.number="formData.sort"
            :maxlength="4"
            placeholder="请输入(0-9999)排序"
            clearable
            :style="{ width: '30%' }"
          >
          </el-input>
          <span class="ft-14 ml-5" style="color: #87877d">分类排序数字越大越靠前</span>
        </el-form-item>
        <el-form-item label="是否启用" prop="isOpen">
          <el-radio-group v-model="formData.isOpen" size="medium">
            <el-radio
              v-for="(item, index) in isOpenOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="flex justify-center mt-20">
      <el-button type="info" size="medium" @click="cancle">取消</el-button>
      <el-button type="primary" size="medium" @click="confirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'IntegralOption',
  components: {},
  props: {},
  data() {
    // 积分值自定义验证
    const cusIntegral = (rule, value, callback) => {
      if (value < 10 || value > 1000000) {
        return callback(new Error('请输入10-1000000之间数值'))
      } else {
        callback()
      }
    }
    // 赠送积分自定义验证
    const cusGiftIntegral = (rule, value, callback) => {
      if (value < 0 || value > 100000) {
        return callback(new Error('请输入0-100000之间数值'))
      } else {
        callback()
      }
    }
    // 需支付金额自定义验证
    const cusAmount = (rule, value, callback) => {
      if (value < 1 || value > 100000) {
        return callback(new Error('请输入1-50000之间数值'))
      } else {
        callback()
      }
    }
    // 排序自定义验证
    const sort = (rule, value, callback) => {
      if (value < 0 || value > 9999) {
        return callback(new Error('请输入0-9999之间数值'))
      } else {
        callback()
      }
    }
    return {
      // 表单
      formData: {
        // 积分值
        integral: '',
        // 赠送积分
        giftIntegral: '',
        // 需支付金额
        amount: '',
        // 排序
        sort: '',
        // 是否启用
        isOpen: false
      },
      rules: {
        integral: [
          {
            required: true,
            message: '请输入积分值(10-1000000)',
            trigger: 'blur'
          },
          { type: 'number', message: '请输入数值' },
          { validator: cusIntegral, trigger: ['blur', 'change'] }
        ],
        giftIntegral: [
          {
            required: true,
            message: '请输入赠送积分(0-100000)',
            trigger: 'blur'
          },
          { type: 'number', message: '请输入数值' },
          { validator: cusGiftIntegral, trigger: ['blur', 'change'] }
        ],
        amount: [
          {
            required: true,
            message: '请输入需支付金额(1-50000)',
            trigger: 'blur'
          },
          { type: 'number', message: '请输入数值' },
          { validator: cusAmount, trigger: ['blur', 'change'] }
        ],
        sort: [
          {
            required: true,
            message: '请输入(0-9999)排序',
            trigger: 'blur'
          },
          { type: 'number', message: '请输入数值' },
          { validator: sort, trigger: ['blur', 'change'] }
        ],
        isOpen: [
          {
            required: true,
            message: '是否启用不能为空',
            trigger: 'change'
          }
        ]
      },
      isOpenOptions: [
        {
          label: '启用',
          value: true
        },
        {
          label: '隐藏',
          value: false
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取积分选择详情
    this.integralInfo()
  },
  mounted() {},
  methods: {
    // 获取积分选择详情
    async integralInfo() {
      const id = this.$route.query.id
      if (!id) return
      try {
        const { data } = await this.$http.user.integralConfig.detail(id)
        for (let key in data) {
          if (key !== 'id' && typeof data[key] === 'string') {
            this.formData[key] = Number(data[key])
          } else {
            this.formData[key] = data[key]
          }
        }
      } catch (error) {
        console.log('integralInfo', error)
      }
    },

    // 点击取消
    cancle() {
      this.$router.back()
    },

    // 点击确定
    confirm: _.debounce(function () {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        const api = this.formData.id ? 'edit' : 'add'
        const tip = this.formData.id ? '编辑成功' : '新增成功'
        // 发送请求
        this.$http.user.integralConfig[api](this.formData)
          .then(res => {
            this.$message.success(tip)
            this.$router.back()
          })
          .catch(err => {
            console.log('confirm', err)
          })
      })
    }, 400)
  }
}
</script>

<style lang="scss" scoped></style>
